import { useRef, useEffect } from 'react'
import { useHistoryTravel } from 'ahooks'
import store from '@/store'
import { isEqual } from 'lodash-es'

const useHistory = () => {
  const [graphState, graphDispatchers] = store.useModel('graph')
  const { value, setValue, back, forward } = useHistoryTravel({
    value: {
      // selectedIds: [],
      // idToEye: {},
      // onlyToEye: {},
      stage: [],
      data: {},
      bim: {}
      // selectedStoreyIds: [],
      // selectedRicentIds: []
    },
    backLength: 10,
    forwardLength: 10
  })

  const valueRef = useRef({})
  // const idToEyeRef = useRef({})
  // const onlyToEyeRef = useRef({})
  const stageRef = useRef({})
  // const selectedIdsRef = useRef([])
  const dataRef = useRef({})
  const bimRef = useRef({})
  // const selectedStoreyIdsRef = useRef([])
  // const selectedRicentIdsRef = useRef([])

  useEffect(() => {
    valueRef.current = value
  }, [value])

  useEffect(() => {
    // idToEyeRef.current = graphState.idToEye
    // onlyToEyeRef.current = graphState.onlyToEye
    stageRef.current = graphState.stage
    // selectedIdsRef.current = graphState.selectedIds
    dataRef.current = graphState.data
    bimRef.current = graphState.bim
    // selectedStoreyIdsRef.current = graphState.selectedStoreyIds
    // selectedRicentIdsRef.current = graphState.selectedRicentIds
  }, [
    // graphState.idToEye,
    // graphState.onlyToEye,
    graphState.stage,
    // graphState.selectedIds,
    graphState.data,
    graphState.bim
    // graphState.selectedStoreyIds,
    // graphState.selectedRicentIds
  ])

  useEffect(() => {
    // const { idToEye, onlyToEye, stage, selectedIds, data, bim, selectedStoreyIds, selectedRicentIds } = valueRef.current
    const { stage, data, bim } = valueRef.current
    if (
      // !isEqual(graphState.idToEye, idToEye) ||
      // !isEqual(graphState.onlyToEye, onlyToEye) ||
      !isEqual(graphState.stage, stage) ||
      !isEqual(graphState.data, data) ||
      !isEqual(graphState.bim, bim)
      // !isEqual(graphState.selectedIds, selectedIds) ||
      // !isEqual(graphState.selectedStoreyIds, selectedStoreyIds) ||
      // !isEqual(graphState.selectedRicentIds, selectedRicentIds)
    ) {
      setValue({
        // idToEye: graphState.idToEye,
        // onlyToEye: graphState.onlyToEye,
        // selectedIds: graphState.selectedIds,
        stage: graphState.stage,
        data: graphState.data,
        bim: graphState.bim
        // selectedStoreyIds: graphState.selectedStoreyIds,
        // selectedRicentIds: graphState.selectedRicentIds
      })
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [
    // graphState.idToEye,
    // graphState.onlyToEye,
    // graphState.selectedIds,
    graphState.stage,
    graphState.data,
    graphState.bim
    // graphState.selectedStoreyIds,
    // graphState.selectedRicentIds
  ])

  useEffect(() => {
    // const { idToEye, onlyToEye, selectedIds, stage, data, bim, selectedStoreyIds, selectedRicentIds } = value
    const { stage, data, bim } = value
    if (
      // !isEqual(idToEyeRef.current, idToEye) ||
      // !isEqual(onlyToEyeRef.current, onlyToEye) ||
      // !isEqual(selectedIdsRef.current, selectedIds) ||
      !isEqual(stageRef.current, stage) ||
      !isEqual(graphState.data, data) ||
      !isEqual(graphState.bim, bim)
      // !isEqual(graphState.selectedStoreyIds, selectedStoreyIds) ||
      // !isEqual(graphState.selectedRicentIds, selectedRicentIds)
    ) {
      graphDispatchers.update({ ...value })
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [value])

  return { back, forward }
}

export default useHistory
